<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
    <!-- 在标签指定 name 属性的情况下，v-model 的值为当前标签的 name（此时无法通过索引值来匹配标签）。 -->
    <van-tabs v-model="active" sticky>
      <van-tab name="all" title="全部"></van-tab>
      <van-tab name="payment" title="待支付"></van-tab>
      <van-tab name="delivery" title="待发货"></van-tab>
      <van-tab name="received" title="待收货"></van-tab>
      <van-tab name="comment" title="待评价"></van-tab>
    </van-tabs>

    <OrderListItem
      v-for="item in list"
      :key="item.order_id"
      :item="item"
    ></OrderListItem>
  </div>
</template>

<script>
import OrderListItem from '@/components/OrderListItem.vue'
import { getMyOrderList } from '@/api/order'
export default {
  name: 'OrderPage',
  components: {
    OrderListItem
  },
  data () {
    return {
      active: this.$route.query.dataType || 'all', // 用户界面点击，传参过来，这里接收
      page: 1,
      list: []
    }
  },
  created () {
    // 获取我的订单数据
    this.getOrderList()
  },
  methods: {
    // 获取我的订单数据
    async getOrderList () {
      const result = await getMyOrderList(this.active, this.page)
      console.log(result)
      result.data.list.data.forEach((item) => {
        // 对获取的数据result.data.list.data数组的每一个元素（对象）---添加一个total_num 属性，默认值为0
        item.total_num = 0
        item.goods.forEach((goods) => {
          // item.goods的每一项的total_num属性值总和为item.total_num
          item.total_num += goods.total_num
        })
      })
      this.list = result.data.list.data
    }
  },
  watch: {
    active: {
      immediate: true,
      handler () {
        // value发生变化，则会再次执行一次获取我的订单数据
        this.getOrderList()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.order {
  background-color: #fafafa;
}
.van-tabs {
  position: sticky;
  top: 0;
}
</style>
